import { warnColor } from '@/styles/var'
import styled from 'styled-components'
import { Icon } from '@/components/Icon'

const StyledAlarm = styled.div`
	&.alarm-list-wrap {
		.m-table-link {
			font-size: 12px;
		}
		width: 100%;
		.date-picker {
			position: relative;
		}
		.table-wrap {
			.reject {
				color: ${warnColor};
			}
		}
	}
`
const StyledSearchIco = styled(Icon)`
	background-position: -80px -157px;
	margin-top: 4px;
	width: 20px;
	height: 20px;
	line-height: 20px;
`
const StyledButton = styled.div`
	&.button-set {
		display: flex;
		justify-content: right;
		margin-top: 10px;
		.button-warp {
			margin-left: auto;
		}
	}
	@media screen and (min-width: 1421px) {
		&.button-set {
			display: flex;
			margin-left: auto;
			margin-top: 0;
		}
	}
	@media screen and (max-width: 1422px) {
		&.button-set {
			display: flex;
			margin-left: auto;
		}
	}
`
const StyledModal = styled.div`
	padding: 30px;
	height: 100%;
	box-sizing: border-box;
	.header-group {
		display: flex;
		& span {
			font-size: 14px;
			color: #606266;
		}
		& > span {
			color: #8b8b8b;
			font-size: 12px;
			padding-right: 60px;
		}
		&.self-group {
			margin-top: 10px;
		}
	}
	.tree .kd-tree-node {
		margin-top: 5px;
	}
`
export { StyledAlarm, StyledSearchIco, StyledButton, StyledModal }
